*, *:before, *:after {
  box-sizing: border-box;
}

:root {
  --white: #fff;
  --black: #000;
  --bg: #f8f8f8;
  --grey: #999;
  --dark: #1a1a1a;
  --light: #e6e6e6;
  --wrapper: 1000px;
  --blue: #00b0ff;
}

body {
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-image: url("../img/image.jpg");
  background-size: cover;
  background-repeat:no-repeat;
}

.wrapper {
  position: relative;
  left: 50%;
  width: var(--wrapper);
  height: 800px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
/*天气模块*/
#weather{
  position: absolute;
  top: 25px;
  left: 910px;
  width: 200px;
  height: 200px;
  color: white;
}

#showforecast{
  position: absolute;
  top: 190px;
  left: 1030px;
  width:70px;
  height: 35px;
  color: white;
  font-family: '微软雅黑', "宋体", "Arial Narrow", Helvetica, sans-serif;
  border-radius: 10px;
  opacity: 50%;
  background-color: #0d3349;
}
#forecast-icon{
  position: absolute;
  left: 1000px;
  top: -25px;
  width: 100px;
  height: 100px;
  background-color: white;
  background-image: url("../img/forecast-icon.gif") ;
  background-repeat: no-repeat;
  transform: scale(0.5);
  /*background-position:-85px -85px; !* 晴天// 第一个参数是左右,第二个参数是上下*!*/
  /*background-position:-210px -85px; !* 多云转晴*!*/
  /*background-position:-345px -85px; !* 小雨转晴*!*/
  /*background-position:-475px -85px; !* 阴*!*/
  /*background-position:-85px -220px; !* 中雨*!*/
}

#forecast{
  position: absolute;
  top: 25px;
  left: 1100px;
  width: 200px;
  height: 200px;
  color: white;
  display: none;
}
.container {
  position: relative;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 75%;
  background-image: url("https://pic3.zhimg.com/80/v2-ce73506eb2ad060384d7f41c9c69012b_720w.jpg?source=1940ef5c");
  background-repeat: no-repeat;
  background-size: 100%,100%;
  background-position: 0px, 50px;
  /*background-image: url("../img/bg.jpg");*/
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
/*//底层*/
}
.container .left {
  float: left;
  width: 37.6%;
  height: 100%;
  /*background-image: url("../img/bg.jpg");*/
  border: 1px solid var(--light);
  /*background-color: var(--white);*/
}
.accountImg{
  width: 50px;
  height: 50px;
  background-image: url("../img/thomas.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.tips{
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 75%;
  left: 50%;
  margin-left: -140px;
  margin-top: 100px;
  opacity: 0;
  transition: opacity 1s;
}
.tips::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.accountImg:hover .tips{
  visibility: visible;
  opacity: 1;
}
.container .left .top {
  position: relative;
  width: 100%;
  /*height: 96px;*/
  height: 126px;
  padding: 29px;
}
.container .left .top:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 80%;
  height: 1px;
  content: '';
  background-color: var(--light);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.container .left input {
  float: left;
  width: 188px;
  height: 32px;
  margin-top: 2px;
  padding: 0 15px;
  border: 1px solid var(--light);
  background-color: #eceff1;
  border-radius: 21px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}
.container .left input:focus {
  outline: none;
}
.container .left a.search {
  display: block;
  margin-top: 2px;
  float: left;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  border: 1px solid var(--light);
  background-color: var(--blue);
  background-image: url("../img/name-type.png");
  background-repeat: no-repeat;
  background-position: top 7px left 9px;
  border-radius: 50%;
}
.container .left .people {
  margin-left: -1px;
  border-right: 1px solid var(--light);
  border-left: 1px solid var(--light);
  width: calc(100% + 2px);
}
.container .left .people .person {
  position: relative;
  width: 100%;
  padding: 12px 10% 16px;
  cursor: pointer;
  background-color: var(--white);
}
.container .left .people .person:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 80%;
  height: 1px;
  content: '';
  background-color: var(--light);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.container .left .people .person img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
}
.container .left .people .person .name {
  font-size: 14px;
  line-height: 22px;
  color: var(--dark);
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
}
.container .left .people .person .time {
  font-size: 14px;
  position: absolute;
  top: 16px;
  right: 10%;
  padding: 0 0 5px 5px;
  color: var(--grey);
  background-color: var(--white);
}
.container .left .people .person .preview {
  font-size: 14px;
  display: inline-block;
  overflow: hidden !important;
  width: 70%;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--grey);
}
.container .left .people .person.active, .container .left .people .person:hover {
  margin-top: -1px;
  margin-left: -1px;
  padding-top: 13px;
  border: 0;
  background-color: var(--blue);
  width: calc(100% + 2px);
  padding-left: calc(10% + 1px);
}
.container .left .people .person.active span, .container .left .people .person:hover span {
  color: var(--white);
  background: transparent;
}
.container .left .people .person.active:after, .container .left .people .person:hover:after {
  display: none;
}
.container .right {
  position: relative;
  float: left;
  width: 62.4%;
  height: 100%;
}
.container .right .top {
  width: 100%;
  height: 47px;
  padding: 15px 29px;
  background-color: #eceff1;

}
.container .right .top span {
  font-size: 15px;
  color: var(--grey);
}
.container .right .top span .name {
  color: var(--dark);
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
}
.container .right .chat {
  position: relative;
  display: none;
  /*display:block;*/
  overflow: hidden;
  padding: 0 35px 92px;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: var(--light);
  height: calc(100% - 48px);
  justify-content: flex-end;
  flex-direction: column;
}

.container .right .write {
  position: absolute;
  bottom: 29px;
  left: 30px;
  height: 42px;
  padding-left: 8px;
  border: 1px solid var(--light);
  background-color: #eceff1;
  width: calc(100% - 58px);
  border-radius: 5px;
}
.container .right .write input {
  font-size: 16px;
  float: left;
  width: 347px;
  height: 40px;
  padding: 0 10px;
  color: var(--dark);
  border: 0;
  outline: none;
  background-color: #eceff1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}
.container .right .write .write-link.attach:before {
  display: inline-block;
  float: left;
  width: 20px;
  height: 42px;
  content: '';
  background-image: url("../img/attachment.png");
  background-repeat: no-repeat;
  background-position: center;
}
.container .right .write .write-link.smiley:before {
  display: inline-block;
  float: left;
  width: 20px;
  height: 42px;
  content: '';
  background-image: url("../img/smiley.png");
  background-repeat: no-repeat;
  background-position: center;
}
.container .right .write .write-link.send:before {
  display: inline-block;
  float: left;
  width: 20px;
  height: 42px;
  margin-left: 11px;
  content: '';
  background-image: url("../img/send.png");
  background-repeat: no-repeat;
  background-position: center;
}
.container .right .bubble {
  font-size: 16px;
  position: relative;
  display: inline-block;
  clear: both;
  margin-bottom: 8px;
  padding: 13px 14px;
  vertical-align: top;
  border-radius: 5px;
}
.container .right .bubble:before {
  position: absolute;
  top: 19px;
  display: block;
  width: 8px;
  height: 6px;
  content: '\00a0';
  -webkit-transform: rotate(29deg) skew(-35deg);
          transform: rotate(29deg) skew(-35deg);
}
.container .right .bubble.you {
  float: left;
  color: var(--white);
  background-color: var(--blue);
  align-self: flex-start;
  -webkit-animation-name: slideFromLeft;
          animation-name: slideFromLeft;
}
.container .right .bubble.you:before {
  left: -3px;
  background-color: var(--blue);
}
.container .right .bubble.me {
  float: right;
  color: var(--dark);
  background-color: #eceff1;
  align-self: flex-end;
  -webkit-animation-name: slideFromRight;
          animation-name: slideFromRight;
}
.container .right .bubble.me:before {
  right: -3px;
  background-color: #eceff1;
}
.container .right .conversation-start {
  position: relative;
  width: 100%;
  margin-bottom: 27px;
  text-align: center;
}
.container .right .conversation-start span {
  font-size: 14px;
  display: inline-block;
  color: var(--grey);
}
.container .right .conversation-start span:before, .container .right .conversation-start span:after {
  position: absolute;
  top: 10px;
  display: inline-block;
  width: 30%;
  height: 1px;
  content: '';
  background-color: var(--light);
}
.container .right .conversation-start span:before {
  left: 0;
}
.container .right .conversation-start span:after {
  right: 0;
}

@keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    opacity: 0;
  }
  100% {
    margin-left: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    opacity: 0;
  }
  100% {
    margin-left: 0;
    opacity: 1;
  }
}
@keyframes slideFromRight {
  0% {
    margin-right: -200px;
    opacity: 0;
  }
  100% {
    margin-right: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slideFromRight {
  0% {
    margin-right: -200px;
    opacity: 0;
  }
  100% {
    margin-right: 0;
    opacity: 1;
  }
}


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.1);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
}

.chat-thread {
  width: 300px;
  margin: 24px auto 0 auto;
  padding: 0 20px 0 0;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat-thread li {
  position: relative;
  clear: both;
  display: inline-block;
  padding: 16px 40px 16px 20px;
  margin: 0 0 20px 0;
  border-radius: 10px;
  background-color: white;
}

/* Chat - Avatar */
.chat-thread li:before {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  content: '';
}

/* Chat - Speech Bubble Arrow */
.li_right:after {
  position: absolute;
  top: 15px;
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid white;
}

.li_left:after {
  position: absolute;
  top: 15px;
  left: -15px;
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid white;
  transform: rotate(90deg);
}

.li_right:before {
  right: -80px;
  background-size: 100% 100%;
  background-image: url("../img/thomas.jpg");
}

.li_right:after {
  border-right: 15px solid transparent;
  right: -15px;

}
.li_left:before {
  left: -80px;
  background-size: 100% 100%;
  background-image: url("../img/dog.png");
}

.li_left:after {
  border-right: 15px solid transparent;
  right: -15px;

}

/*.chat-thread li:nth-child(even) {*/
/*  animation: show-chat-even 0.15s 1 ease-in;*/
/*  -moz-animation: show-chat-even 0.15s 1 ease-in;*/
/*  -webkit-animation: show-chat-even 0.15s 1 ease-in;*/
/*  float: left;*/
/*  margin-left: 80px;*/
/*  color: #0EC879;*/
/*}*/

/*.chat-thread li:nth-child(even):before {*/
/*  left: -80px;*/
/*  background-image: url();*/
/*}*/

/*.chat-thread li:nth-child(even):after {*/
/*  border-left: 15px solid transparent;*/
/*  left: -15px;*/
/*}*/



/* Small screens */
@media all and (max-width: 767px) {
  .chat-thread {
    width: 100%;
    height: 260px;
  }

  /*.chat-window {*/
  /*  left: 5%;*/
  /*  width: 90%;*/
  /*}*/
}
/* Medium and large screens */
@media all and (min-width: 768px) {
  .chat-thread {
    width: 90%;
    height: 380px;
  }

  /*.chat-window {*/
  /*  left: 25%;*/
  /*  width: 50%;*/
  /*}*/
}
@keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }

  100% {
    margin-left: 0;
  }
}
@-moz-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }

  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }

  100% {
    margin-left: 0;
  }
}
@keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }

  100% {
    margin-right: 0;
  }
}
@-moz-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }

  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}


#addFriend{
  width: 50px;
  height: 100px;
}

#emotion{
  position: relative;
  left: 500px;
  top: 70px;
  width: 330px;
  height: 132px;
  z-index: 1;
  display: none;
  /*opacity: 50%;*/
  background-color: white;
  overflow-x: hidden;
  overflow-y:scroll;
}
#table{
  border-collapse:separate;
  border-spacing: 10px 10px;
}

#encode{
  position: absolute;
  top: 100px;
  left: 80px;
  width: 450px;
  height: 320px;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  opacity: 80%;
}

.btn {
  width: 110px;
  height: 40px;
  line-height: 0px;
  text-align: center;
  background: #eb94d0;
  /* 创建渐变 */
  background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
  /* 给按钮添加圆角 */
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #9daef5;
  -webkit-box-shadow: 6px 5px 24px #666666;
  -moz-box-shadow: 6px 5px 24px #666666;
  box-shadow: 6px 5px 24px #666666;
  font-family: Arial;
  color: #fafafa;
  font-size: 10px;
  padding: 19px;
  text-decoration: none;
}
/* 悬停样式 */
.btn:hover {
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
  background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
  text-decoration: none;
}
#encry-title{
  width: 400px;
  height: 50px;
  color: red;
  font-family: 华文隶书;
  font-size: large;
  margin: 0 auto;
  line-height: 50px;
}
#encry-pub-pri-key{
  margin-top: 20px;
}

#encry-btn{
  margin-top: 20px;
}
#getEvent{
  border-radius: 10px;
}
#nowtime{
  color: #0d3349;
}